<template>
  <div
    id="indexBody"
    style="
      position: relative;
      background-color: #ecf3f9;
    "
  >
    <div class="fixTop">
      <div class="headSearch">
        <span class="title">西南管道服务平台</span>
        <span class="iconfont" @click="gotoSearch">&#xe653;</span>
      </div>
      <!-- 头部 -->
      <div class="gd-top">
        <a
          v-for="(item, index) in headerList"
          @click="clickNav(item, index)"
          :key="item.type"
          :type="item.type"
          :class="item.show ? 'active' : ''"
          >{{ item.DatabaseName }}</a
        >
      </div>
      <!-- 链接 -->
      <a :href="'#top'+tabIndex" class="fixBox" @click="getTop">
        <span class="iconfont">&#xe834;</span>
      </a>
    </div>

    <!-- 模板 -->
    <div class="outer">
      <!-- 切换的内容 -->
      <div class="fixDiv">
        <div class="fixBottom">
          <!-- 图片 -->
          <div id="top0" class="img">
            <img src="@/assets/img/background-index.png" />
          </div>
          <!-- 导航栏 -->
          <div class="tab">
            <span class="tabLine">
              <a href="#01">情报中心</a>
            </span>
            <span class="tabLine">
              <a href="#02">技术热点</a>
            </span>
            <span class="tabLine">
              <a href="#03">科技创新</a>
            </span>
          </div>
          <!-- 政策法规-->
          <div class="cnki" id="01">
            <div class="top">
              <span class="iconfont">&#xe633;</span>
              <span class="title">政策法规</span>
              <span class="more" @tap="gotoMore(lawDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <ul class="mgTop">
                <li @tap="gotoDetail(item)" v-for="(item, index) in lawData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 共享知识-->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe615;</span>
              <span class="title">共享知识</span>
              <span class="more" @tap="gotoMore(shareKnowledgeDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <div class="tabList">
                <div
                  class="li"
                  @click="clickBanner(item, 'knowledge')"
                  v-for="(item, index) in shareBanner"
                  :class="item.active ? 'active' : ''"
                  :key="index"
                >
                  {{ item.NAME }}
                </div>
              </div>
              <ul>
                <li @tap="gotoDetail(item)" v-for="(item, index) in shareKnowledgeData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 部门知识 -->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe607;</span>
              <span class="title">部门知识</span>
              <span class="more" @tap="gotoMore(departmentDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <div class="tabList">
                <div
                  class="li"
                  @click="clickBanner(item, 'department')"
                  v-for="(item, index) in departmentBanner"
                  :class="item.active ? 'active' : ''"
                  :key="index"
                >
                  {{ item.NAME }}
                </div>
              </div>
              <ul>
                <li @tap="gotoDetail(item)" v-for="(item, index) in departmentData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 原油管道 -->
          <div class="cnki" id="02">
            <div class="top">
              <span class="iconfont">&#xe67f;</span>
              <span class="title">原油管道</span>
              <span class="more" @tap="gotoMore(crudeOilDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <div class="tabList">
                <div
                  class="li"
                  @click="clickBanner(item, 'crude')"
                  v-for="(item, index) in crudeOilBanner"
                  :class="item.active ? 'active' : ''"
                  :key="index"
                >
                  {{ item.NAME }}
                </div>
              </div>
              <ul>
                <li @tap="gotoDetail(item)" v-for="(item, index) in crudeOilData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 天然气管道 -->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe613;</span>
              <span class="title">天然气管道</span>
              <span class="more" @tap="gotoMore(gasDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <div class="tabList">
                <div
                  class="li"
                  @click="clickBanner(item, 'gas')"
                  v-for="(item, index) in gasBanner"
                  :class="item.active ? 'active' : ''"
                  :key="index"
                >
                  {{ item.NAME }}
                </div>
              </div>
              <ul>
                <li @tap="gotoDetail(item)" v-for="(item, index) in gasData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 成品油管道 -->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe6d0;</span>
              <span class="title">成品油管道</span>
              <span class="more" @tap="gotoMore(oilDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <div class="tabList">
                <div
                  class="li"
                  @click="clickBanner(item, 'aoil')"
                  v-for="(item, index) in oilBanner"
                  :class="item.active ? 'active' : ''"
                  :key="index"
                >
                  {{ item.NAME }}
                </div>
              </div>
              <ul>
                <li @tap="gotoDetail(item)" v-for="(item, index) in oilData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 科技成果 -->
          <div class="cnki" id="03">
            <div class="top">
              <span class="iconfont">&#xe720;</span>
              <span class="title">科技成果</span>
              <span class="more" @tap="gotoMore(scienceDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <ul class="mgTop">
                <li @tap="gotoDetail(item)" v-for="(item, index) in scienceData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 专利 -->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe612;</span>
              <span class="title">专利</span>
              <span class="more" @tap="gotoMore(patentDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <ul class="mgTop">
                <li @tap="gotoDetail(item)" v-for="(item, index) in patentData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>

          <!-- 标准 -->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe63e;</span>
              <span class="title">标准</span>
              <span class="more" @tap="gotoMore(standardDataParams)">更多&gt;&gt;</span>
            </div>
            <div class="list">
              <ul class="mgTop">
                <li @tap="gotoDetail(item)" v-for="(item, index) in standardData" :key="index">
                  {{ item.题名 }}
                </li>
              </ul>
            </div>
          </div>

          <!-- 推荐期刊 -->
          <div class="cnki">
            <div class="top">
              <span class="iconfont">&#xe619;</span>
              <span class="title">推荐期刊</span>
            </div>
            <div class="listImg">
            <div class="img1" 
                @click="gotoImg(item)" 
                :key="index"
                  v-for="(item, index) in journalsData">
                <img
                  :key="index"
                  :src="item.图片链接"
                  alt=""
                />
                <div class="title">
                  {{item.C_NAME}}
                </div>
            </div>
            </div>
          </div>
        </div>
        <div 
          v-for="(item, index) in headerList2"
          :key="index"
          class="fixBottom"
        >
            <div :id="'top'+(index+1)"  class="contentBottom">
              <List  :clickIndex="clickIndex" :tabItem="tabItem" :listData="item.data"></List>
            </div> 
        </div>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
import { Indicator  } from "mint-ui";
import List from "./list.vue";
// 调入接口
import { getCNKI, getHomeList, getKnowledgeTab,singleSearch } from "../../api/home.js";

export default {
  watch: {},
  props: {},

  data() {
    return {
      userInfo: "",
      headerList: [],
      headerList2: [],
      // 政策法规
      lawData: [],
      lawDataParams:{},
      //共享知识
      shareBanner: [],
      shareKnowledgeData: [],
      shareKnowledgeDataParams:{},
      // 写死数据 ,部门知识
      departmentBanner: [
        { NAME: "技术中心", CODE: "JSZXZSK", active: true },
        { NAME: "科技数字部", CODE: "KEJICHU", active: false },
        { NAME: "管道处", CODE: "GDC", active: false },
        { NAME: "计量中心", CODE: "JLZX", active: false },
        { NAME: "建管中心", CODE: "JGZX", active: false },
      ],
      departmentData: [],
      departmentDataParams:{},
      // 原油管道
      crudeOilBanner: [
        { NAME: "原油管道前期建设", CODE: "KTJS1", active: true },
        { NAME: "原油管道运行与维护", CODE: "KTJS2", active: false },
      ],
      crudeOilData: [],
      crudeOilDataParams:{},
      // 天然气
      gasBanner: [
        { NAME: "天然气管道前期建设", CODE: "KFJS1", active: true },
        { NAME: "天然气管道运行与维护", CODE: "KFJS2", active: false },
      ],
      gasData: [],
      gasDataParams:{},
      // 成品油
      oilBanner: [
        { NAME: "汽油（柴油）管道", CODE: "GCJS1", active: true },
        { NAME: "航空煤油管道", CODE: "GCJS2", active: false },
      ],
      oilData: [],
      oilDataParams:{},
      // 科技成果
      scienceData: [],
      scienceDataParams:{},
      // 专利
      patentData: [],
      patentDataParams:{},
      // 标准
      standardData: [],
      standardDataParams:{},
      // 推荐期刊
      journalsData: [],
      currentX: 0,
      allLoaded:false,
      pageCount:null, 
      tabItem:{},
      tabIndex:"0", 
      clickIndex:null, 
      dataAry:[
      { type: "ZCFG" }, // 政策法规
      { type: "bmzs", code: "JSZXZSK" }, // 部门知识
      { type: "KTJS1", code: null }, // 原油管道
      { type: "KFJS1", code: null }, // 天然气
      { type: "GCJS1", code: null }, // 原油管道
      { type: "KJFG" }, // 科技成果
      { type: "ZL" }, // 专利
      { type: "BZ" }, // 标准
      { type: "TJQK" }, //期刊
      ],
    };
  },
  created() {
    // 获取公共头部
    this.getHeader();
    let ary = [
      { type: "ZCFG" }, // 政策法规
      { type: "bmzs", code: "JSZXZSK" }, // 部门知识
      { type: "KTJS1", code: null }, // 原油管道
      { type: "KFJS1", code: null }, // 天然气
      { type: "GCJS1", code: null }, // 原油管道
      { type: "KJFG" }, // 科技成果
      { type: "ZL" }, // 专利
      { type: "BZ" }, // 标准
      { type: "TJQK" }, //期刊
    ];
    // ary.forEach((i) => {
    //   this.getContent(i);
    // }); 
    this.loop(0);
    // 共享知识
    this.getKnowledgeTab();
  },
  mounted() {

    // 头部加入激活样式
    $(".gd-top a").click(function (event) {
      $(this).addClass("active").siblings("a").removeClass("active");
    });
    // 获取用户信息;
    if (this.$store.getters.getUser) {
      this.userInfo = this.$store.getters.getUser;
    }
    // 滑动事件
    let mybody = document.getElementById("indexBody");
    let startX = null;
    let startY = null;
    let moveEndX = null;
    let moveEndY = null;
    let X = null;
    let Y = null;
    mybody.addEventListener("touchstart", function (e) {
      startX = e.touches[0].pageX;
      startY = e.touches[0].pageY;
    });
    let _this = this;
    mybody.addEventListener("touchmove", function (e) {
      moveEndX = e.changedTouches[0].pageX;
      moveEndY = e.changedTouches[0].pageY;
      Y = moveEndY - startY; 
        document.querySelector(".fixBox").classList.remove("fixShow");
      _this.headerList.forEach((i,index)=>{
        if(i.show) {
          _this.tabIndex =`${index}`
        }
      })
      // 向上
      if (Y < 0) {
        document.querySelector(".fixBox").classList.add("fixShow");
      }
      // if (Y > 0 && window.scrollY === 0) {
      //   document.querySelector(".fixBox").classList.remove("fixShow");
      // }
    });
    // 左右滑事件只执行一次的条件控制
    mybody.addEventListener("touchend", function (e) {
      moveEndX = e.changedTouches[0].pageX;
      X = moveEndX - startX;
      Y = moveEndY - startY;
      // 进行滑动控制限制
      if (Y > 38 || Y < -38) return;
      if (X < 0) {
        if (_this.currentX === _this.headerList2.length) {
          return;
        }
        ++_this.currentX;
        document.querySelector(".fixDiv").style.transform = `translateX(${
          -_this.currentX * 100
        }vw)`;
      }  

      _this.headerList.forEach((i,index)=>{
        if(i.show) {
          _this.tabIndex =`${index}`
        }
      })
   
      if (X > 0) {
        if (_this.currentX === 0) {
          return;
        }
        --_this.currentX;
        document.querySelector(".fixDiv").style.transform = `translateX(${
          -_this.currentX * 100
        }vw)`; 
      }
      _this.tabItem = _this.headerList[_this.currentX];
      _this.clickIndex = _this.currentX - 1;
      // 判断激活的tab的位置进行移动;
      let num = Math.floor(_this.currentX / 4);
      let screenWidth = Number(document.documentElement.clientWidth);
      $(".gd-top").scrollLeft(num * screenWidth);
      // 移动激活tab样式
      _this.headerList.forEach((i, index) => {
        if (index === _this.currentX) {
          i.show = true;
        } else {
          i.show = false;
        }
      });
    });
  },
  methods: { 

    // 循环函数
    loop(index){ 
      if(index < this.dataAry.length) {
      // Indicator.open({
      //   text: 'Loading...',
      //   spinnerType: 'fading-circle'
      // });
      this.getContent(this.dataAry[index],index);
      }else {
        // Indicator.close();
      }
    },
    // 返回顶部
    getTop() {
      document.querySelector(".fixBox").classList.remove("fixShow");
    },
    // 跳转搜索页
    gotoSearch() {
      this.$router.push({
        path: "/searchIndex",
      });
    },
    // 获取头部 cnki列表数据
    getHeader() {
      getCNKI().then((res) => {
        let str = JSON.parse(res.data.data);
        this.cnkiList = str.split(",");
        this.cnkiList = this.cnkiList.map((i) => {
          let obj = {};
          obj.DatabaseName = i.substring(0, i.indexOf(":"));
          obj.DatabaseCode = i.substring(i.indexOf(":") + 1, i.length);
          return obj;
        });
        //加入首页
        this.cnkiList.unshift({
          DatabaseName: "首页",
          DatabaseCode: "1234",
        });
        this.headerList = this.cnkiList.map((i, index) => {
          i.type = index + 1;
          i.show = i.type === 1 ? true : false;
          return i;
        });
        // 获取列表
        this.headerList2 = JSON.parse(JSON.stringify(this.headerList)).splice(
          1
        );
        this.headerList = this.headerList.map(i=>{
          i.pageNow = 1;
          return i;
        })
        // 首次加载
        this.getList();
      });
    },

    // 获取政策法规菜单栏
    getContent(params,index) {
      getHomeList({
        type: params.code
          ? params.code
          : params.data
          ? params.data
          : params.type,
        code: params.code ? params.type : null,
        style:0,
      }).then((res) => { 
        if(typeof(index)) {
          this.loop(++index);
        }
        // 不存在点击的情况
        if (!params.code) {
          switch (params.type) {
            // 政策法规
            case "ZCFG":
              // 只展示前五条
              this.lawData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];

              this.lawDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };  
                console.log(this.lawData,"测试123");

              break;
            // // 原油管道
            case "KTJS1":
              this.crudeOilData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                this.crudeOilDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
            // 天然气管道
            case "KFJS1":
              this.gasData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                  
                this.gasDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
            // 原油管道
            case "GCJS1":
              this.oilData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                   
                this.oilDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
            // 科技成果
            case "KJFG":
              this.scienceData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                this.scienceDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
            // 专利
            case "ZL":
              this.patentData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                this.patentDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
            // 标准
            case "BZ":
              this.standardData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                this.standardDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
            // 推荐期刊
            case "TJQK":
              this.journalsData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 10)
                  : [];
                this.journalsDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
          }
        } else {
          switch (params.type) {
            // 共享知识
            case "gxzs":
              this.shareKnowledgeData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                this.shareKnowledgeDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1, 
                };
              break;

            // 部门知识
            case "bmzs":
              this.departmentData =
                res.data.status === 0
                  ? JSON.parse(res.data.data).slice(0, 5)
                  : [];
                this.departmentDataParams = {
                  type: params.code
                    ? params.code
                    : params.data
                    ? params.data
                    : params.type,
                  code: params.code ? params.type : null,
                  style:1,
                };
              break;
          }
        }
      });
    },

    //共享知识
    getKnowledgeTab() {
      getKnowledgeTab().then((res) => {
        this.shareBanner = JSON.parse(res.data.data);
        this.shareBanner = this.shareBanner.map((i, index) => {
          i.active = index === 0 ? true : false;
          index === 0 ? this.getContent({ type: "gxzs", code: i.CODE }) : null;
          return i;
        });
      });
    },
    // 点击激活方法公共方法
    cancelActive(name, item) {
      this[name] = this[name].map((i) => {
        i.active = false;
        return i;
      });
      item.active = true;
    },
    // 点击公共方法
    clickBanner(item, value) {
      switch (value) {
        // 共享知识
        case "knowledge":
          this.cancelActive("shareBanner", item);
          this.getContent({ type: "gxzs", code: item.CODE });
          break;
        // 部门知识
        case "department":
          this.cancelActive("departmentBanner", item);
          this.getContent({ type: "bmzs", code: item.CODE });
          break;
        // 原油管道
        case "crude":
          this.cancelActive("crudeOilBanner", item);
          this.getContent({ type: "KTJS1", data: item.CODE, code: null });
          break;
        // 原油管道
        case "gas":
          this.cancelActive("gasBanner", item);
          this.getContent({ type: "KFJS1", data: item.CODE, code: null });
          break;
        case "aoil":
          this.cancelActive("oilBanner", item);
          this.getContent({ type: "GCJS1", data: item.CODE, code: null });
          break;
      }
    },

    // 头部点击
    clickNav(item, index) {
      this.headerList.forEach((i) => {
        i.show = false;
      });
      item.show = true;
      let num = -index * 100;
      this.currentX = index;
      document.querySelector(
        ".fixDiv"
      ).style.transform = `translateX(${num}vw)`; 
      this.tabItem = item;  
      this.clickIndex = index - 1;
      // this.getList(index);
    }, 

    // 滑入顶部方法
    
    getList() {  
      this.headerList2 = this.headerList2.map(i=>{ 
        singleSearch({
          pagenow:1,
          pagesize:5,
          type:2,
          dbcode:i.DatabaseCode,
          wherestr:"",
          orderstr:"",
          username:JSON.parse(
          window.localStorage.userInfo
        ).UserName,
        }).then((res) => { 
          i.data = JSON.parse(res.data.data);
          i.pageCount = res.data.DataCount;
        }); 
          return i;
      });

    },
    gotoMore(item) {
      this.$router.push({
        path:"/listMore",
        query:{
          data:JSON.stringify(item)
        }
      })
    },

// 跳转详情
    gotoDetail(item) { 
      let type = 1;
      let url = "";
      let data = JSON.stringify({
        dbcode: item.TABLENAME,
        sysid: item.SYS_FLD_SYSID,
        fileName:item.文件名,
        dbname:item.来源数据库,
        vsm:item.SYS_VSM,
      });
      // 本地
    if(item.TABLENAME && item.TABLENAME.indexOf('_METADATA') !=-1){

    }else{
        type = 2;
        url =item.细览链接;  
    }   
    if(type === 2) {
      this.$router.push({
          path: "/cnkiDetail",
          query: {
            type,
            data,
            url,
            tableName:item.表名,
            name: item.题名,
          }
      })
    }else {
      this.$router.push({
          path: "/detail",
          query: {
            type,
            data,
            url,
            tableName:item.表名,
            name: item.题名,
          }
      })
    }
    },
    // 期刊跳转详情
    gotoImg(item) {
      let type = 2;
      let url =item.细览链接;
      let data = JSON.stringify({
        dbcode: item.TABLENAME,
        sysid: item.SYS_FLD_SYSID,
        fileName:item.文件名,
        dbname:item.来源数据库,
        vsm:item.SYS_VSM,
      });
      this.$router.push({
          path: "/cnkiDetail",
          query: {
            type,
            url,
            data,
            tableName:item.表名,
            name: item.题名,
          }
      })
    }
  },
  
  components: {
    List,
  },
};
</script> 

<style lang="less" scoped>
.fixTop {
  position: fixed;
  top: 0;
  z-index: 9999;

  // 头部
  .headSearch {
    width: 100vw;
    height: 55px;
    line-height: 55px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #bbb;
    position: relative;
    .title {
      color: #5b5b5b;
      font-size: 17px;
    }
    .iconfont {
      position: absolute;
      right: 25px;
      font-size: 23px;
    }
  }
}
// 点击块
.gd-top {
  background: #fff;
  height: 40px;
  box-sizing: border-box;
  overflow-x: auto;
  width: 100vw;
  white-space: nowrap;
  border-bottom: 1px solid #bbb;
  transition: transform 0.5s ease;

  a {
    display: inline-block;
    height: 38px;
    margin-right: 20px;
    font-size: 16px;
    line-height: 38px;
    border-bottom: 2px solid transparent;
    text-align: center;
    padding: 0 20px;
  }
  a:last-child {
    margin-right: 0;
  }
  a.active {
    position: relative;
    /* border-bottom: 2px solid #0080e1; */
    color: #0080e1;
    border-bottom: 4px solid #0080e1;
  }
}
// 图片
.img {
  padding-top: 96px;
  width: 100%;
  height: 120px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
}

// 导航栏
.tab {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  background: #367bf0;
  .tabLine {
    flex: 1;
    text-align: center;
    a {
      font-size: 15px;
      text-decoration: none;
      color: #fff;
    }
  }
}

// cnki列表
.cnki {
  margin-top: 20px;
  width: 100%;
  background: #fff;
  .top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #bbb;
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-left: 5px;
      vertical-align: middle;
    }
    .iconfont {
      font-size: 24px;
      vertical-align: middle;
    }
    .more {
      font-size: 12px;
      float: right;
      vertical-align: middle;
    }
  }
  .list {
    width: 100%;
    margin: 0;
    padding: 0;
    .tabList {
      margin-top: 10px;
      margin: 10px auto 0;
      width: calc(100% - 40px);
      white-space: nowrap;
      overflow-x: auto;
      .li {
        display: inline-block;
        padding: 10px 20px;
      }
      .active {
        background: #367bf0;
        color: #fff;
      }
    }
    ul {
      margin: 0;
      padding: 0;
      width: 100%;
      padding: 0px 20px 10px 20px;
      box-sizing: border-box;
      li {
        width: 100%;
        white-space: nowrap;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px dashed #ddd;
        list-style: none;
      }
      li:last-child {
        border-bottom: 0 none;
      }
    }
    .mgTop {
      margin-top: 10px;
    }
  }
  .listImg {
    width: 100%;
    padding: 10px 20px 20px;
    overflow-x: auto;
    white-space: nowrap;
    box-sizing: border-box;
    .img1 {
      display: inline-block;
      width: 20vw;
      height: 24vw;
      margin-right: 4vw;
      img {
        width:100%;
      }
      .title {
        width:100%;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:12px;
      }
    }
    .img:last-child {
      margin-right: 0;
    }
  }
}
.cnki:last-child {
  margin-bottom: 20px;
}
.fixBox {
  display: none;
  position: fixed;
  text-decoration: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dbdbdb;
  opacity: 0.8;
  line-height: 40px;
  right: 20px;
  bottom: 100px;
  text-align: center;
  .iconfont {
    font-size: 25px;
    color: #fff;
  }
}
.fixShow {
  display: block;
}
.local {
  margin-bottom: 80px;
}
// 通用图标设定
.iconfont {
  color: #158fc9;
}

::-webkit-scrollbar {
  display: none;
}

.outer {
  position: relative;
  width: 100vw;
  min-height: calc(100vh - 61px);
  overflow-x: hidden;
  // 切换内容动画
  .fixDiv { 

    position: absolute;
    left: 0vw;
    display: flex;
    transition: transform 0.5s ease;

    .fixBottom { 

      display: inline-block;
      height: calc(100vh - 61px);
      width: 100vw;
      overflow-y: auto; 
      .contentBottom {
        padding-top:96px;
        box-sizing: border-box;
          width: 100vw;
        }
    }
  }
}
</style>
